{include file="public/header"/}
</head>
<body>
<div class="layui-fluid" id="LAY-component-layer-list">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label auto">等级：</label>
                      <div class="layui-input-inline">
                        <select name="level_id">
                            <option value="">全部</option>
                            {volist name="$user.levellist" id="field"}
                            <option value="{$field.id}">{$field.level_name}</option>
                            {/volist}
                        </select>
                      </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label auto">手机号码：</label>
                        <div class="layui-input-inline mr0">
                            <input name="moblie" class="layui-input" type="text" placeholder="请输入手机号码"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="formSubSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="btnExpLog" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
                    </div>

                    <div class="layui-inline">
                        <button data-type="users_add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增会员</button>
                        <button data-type="users_batch_del" data-url="{:url('/users/batch_del')}" class="layui-btn layui-btn-danger icon-btn">
                        <i class="layui-icon"></i>批量删除</button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="tableUser" lay-filter="tableUser"></table>
        </div>
        <div class="pcfclear"></div>
    </div>
</div>
<script type="text/html" id="tableBarUser">
<a class="layui-btn layui-btn-primary layui-btn-sm" data-type="users_edit" data-id="{{d.id}}">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" data-url="{:url('/users/del')}" data-type="users_del" data-id="{{d.id}}">删除</a>
</script>
<script type="text/html" id="tableStateUser">
    <input type="checkbox" lay-filter="status" name="status" data-id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="正常|锁定" {{d.status==1 ? 'checked':''}}/>
</script>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        // 渲染表格
        var insTb = table.render({
            elem: '#tableUser',
            url: "{:url('/users/index')}",
            page: true,
            cellMinWidth: 100,
            cols: [[
                 {type:'checkbox'},
                {field:'id',title:'ID',width:60,align: 'center'},
                {field: 'level_name', title: '会员级别',templet: function (d) {
                   if(d.level_name =="铜牌会员"){
                       return '<font style="color:red;">'+d.level_name+'</font>';
                   }else if(d.level_name =="银牌会员"){
                       return '<font style="color:#722ed1;">'+d.level_name+'</font>';
                   }else if(d.level_name =="金牌会员"){
                       return '<font style="color:#1890ff;">'+d.level_name+'</font>';
                   }else{
                       return '<font>'+d.level_name+'</font>';
                   } 
                },width:150},
                {field: 'litpic', title: '头像',templet: function (d) {
                    return '<a href="javascript:void(0);"><image style="max-width:26px;max-height:26px;" src="'+d.litpic+'"/></a>';
                }, width: 80,align: 'center'},
                {field: 'username',  title: '用户名',align: 'center'},
                {field: 'mobile',  title: '手机号码',align: 'center'},
                {field: 'add_time',  title: '注册时间',align: 'center'},
                {field: 'login_time',  title: '最后登录时间',align: 'center'},
                {field: 'status',  templet: '#tableStateUser', title: '状态',width: 100,align: 'center'},
                {toolbar: '#tableBarUser', title: '操作', width: 150,align: 'center',}
            ]]
        });

        $(document).on("click","#LAY-component-layer-list .layui-btn",function(){
          var type = $(this).data('type');
          active[type] && active[type].call(this);
        });

        //触发事件
        var active = {
            users_add: function(){
                layer.open({
                    type: 2,
                    title: '添加会员',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: '{:url("/users/add")}'
                });
            },
            users_edit: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                layer.open({
                    type: 2,
                    title: '修改会员',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    area: ['100%', '100%'],
                    content: '{:url("/users/edit")}?id='+id
                });
            },
            users_del: function(){
                delfun(this);
            },
            users_batch_del: function(){
                var checkRows = table.checkStatus('tableUser');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2,time:1000});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                batch_del(this, ids);
            }
        };
        
        // 搜索
        form.on('submit(formSubSearch)', function (data) {
            insTb.reload({where: data.field,page:{curr: 1}}, 'data');
        });  

        // 导出excel
        $('#btnExpLog').click(function () {
            var checkRows = table.checkStatus('tableUser');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });


        //开启关闭
        form.on('switch(status)', function(){
            if ($(this).val() == 0){
                $(this).val(1);
            }else{
                $(this).val(0);
            }
            var dataid = $(this).attr('data-id');
            var pcfurl = '{:url("/ajax/ajax_changeTableVal")}';
            changeTableVal('users','id',dataid,'status',this,pcfurl,'users/index');
        });

    });
</script>
</body>
</html>